import React, { memo, useState, useEffect, useRef } from "react";
import { View, Text, ScrollView } from "@tarojs/components";
import { Tag } from '@antmjs/vantui'
import { COLORS, FUNDSTRATEGYTYPE, FUNDSTRATEGYGROUP } from "@/utils/local-data"
import { useSelector, useDispatch } from 'react-redux'

// import { ReportContext } from "../../../obsPoolDetail/reportDetail";


import './index.scss'

const FundMsg = (props) => {
  let scrollRef = useRef()
  const dispatch = useDispatch()

  const { scrollLeft, scrollEndLeft } = useSelector(state => state.scrollLeft)
  const [beginScroll, setBeginScroll] = useState(false)
  // const { reportDetail } = props
  const { reportDetail } = useSelector(state => state.obsPool)


  useEffect(() => {

  }, [])

  const setScrollLeft = (detail) => {
    if (!beginScroll) return
    dispatch({
      type: 'scrollLeft/changeScrollLeft',
      payload: { scrollLeft: detail.detail.scrollLeft }
    })
  }
  const setScrollEndLeft = (detail) => {
    dispatch({
      type: 'scrollLeft/changeScrollEndLeft',
      payload: { scrollEndLeft: detail.detail.scrollLeft }
    })


  }

  return (

    <View className='scroll-box'>
      <View className='scroll-item'>
        <View className='left gry3'>基金信息</View>
        <ScrollView className='scroll-body'
          scrollX enableFlex
          enhanced
          scrollLeft={beginScroll ? scrollEndLeft : scrollLeft}
          ref={scrollRef}
          onScroll={(detail) => setScrollLeft(detail)}
          onDragEnd={(e) => setScrollEndLeft(e)
          }
          onTouchStart={() => setBeginScroll(true)}
          onTouchEnd={() => setBeginScroll(false)}
        >
          <View className='first-column'>
            <View>沪深300</View>
            <View>中证500</View>
          </View>
          {
            reportDetail.otherList.length ?
              reportDetail.otherList.map((product, index) => {
                return (
                  <View className='public-column' style={{ borderLeft: `2px solid ${COLORS[index % COLORS.length]}` }} key={product.name + index}>
                    <View className='up'>{product?.fundName}</View>
                    <View className='down'>
                      <View className='name'><Text>{product?.orgName}</Text>/<Text>{product?.fundManager}</Text></View>
                      <View>{product.strategyType ? FUNDSTRATEGYTYPE[product.strategyType] : ''}<Tag className={product.strategyGroup == 1 ? 'bgc_red' : product.strategyGroup == 2 ? 'bgc_blue' : 'bgc_gre'}>{FUNDSTRATEGYGROUP[product.strategyGroup]}</Tag></View>
                    </View>
                  </View>
                )
              })
              :
              null
          }

        </ScrollView>
      </View >
    </View >


  );
};

export default memo(FundMsg);
